/******* TIC ********/
	html {
		/* Using this to make the height of the body 100% */
		height: 94%;
	}
	body {
		/*background-image:url('images/spacer.gif');
		background-color:#cccccc;		
	    background-repeat:no-repeat;
	    background-position:center;*/
	    margin: 40px 0px 0px 0px;
		width: 100%;
		min-height: 100%;
	    font-family: Arial, Helvetica, sans-serif;
	} 

	table, thead, tbody, tr, td, th, div, ul, li, ol, p, span, a {
		font-size: inherit;
		font-family: inherit;
	}	

	.tip.tipVisible {
		opacity: 1;
		visibility: visible;
		text-align: center;		
		position:absolute;
	    top:30px; 
	    left:30px;
	    padding: 5px;
		background-color:rgba(112,138,144,1.0);
		-moz-border-radius: 5px 5px 5px 5px;
		border-radius: 5px 5px 5px 5px;	
	    text-align: center;
		-moz-transition: opacity 0.5s ease-in-out;
	}

	#tip.tipHidden{
		opacity: 0;
		visibility: hidden;
	}	

	#tasksSlideout {
		position: fixed;
		top: 60px;
		left: 0px;
		z-index: 5;
		width: 30px;
		height: 170px;
		padding: 30px 3px 0px 0px;
		text-align: center;
		background-color:rgba(112,138,144,0.8);
		-moz-transition-duration: 0.3s;
		-moz-border-radius: 0px 5px 5px 0px;
		border-radius: 0px 5px 5px 0px;
	}
	#tasksSlideoutInner {
		position: fixed;
		top: 40px;
		left: -235px;
		background-color:rgba(112,138,144,0.8);
		width: 215px;
		padding: 10px;
		height: 90%;
		-moz-transition-duration: 0.3s;
		text-align: left;
		-moz-border-radius: 0px 5px 5px 0px;	
		border-radius: 0px 5px 5px 0px;
	}
	#tasksSlideout:hover {
		left: 235px;
	}
	#tasksSlideout:hover #tasksSlideoutInner {
		left: 0;
	}	
	#tasksList{
		height: 90%;
		overflow: auto;
		font-size: 14px;
	}
	
	#timelineSlideout {
		position: fixed;
		top: 270px;
		left: 0px;
		z-index: 4;			
		width: 30px;
		height: 110px;
		padding: 3px 3px 0px 0px;
		text-align: center;
		background-color:rgba(112,138,144,0.8);
		-moz-transition-duration: 0.3s;
		-moz-border-radius: 0px 5px 5px 0px;
		border-radius: 0px 5px 5px 0px;
	}
	#timelineSlideoutInner {
		position: fixed;
		top: 40px;
		left: -235px;
		background-color:rgba(112,138,144,0.8);
		width: 215px;
		padding: 10px 10px 10px 10px;
		/*height: 600px;*/
		height: 90%;
		overflow:auto;
		-moz-transition-duration: 0.3s;
		text-align: left;
		-moz-border-radius: 0px 5px 5px 0px;
		border-radius: 0px 5px 5px 0px;	
	}
	#timelineSlideout:hover {
		left: 235px;
		z-index: 6;
	}
	#timelineSlideout:hover #timelineSlideoutInner {
		left: 0px;
		z-index: 6;
	}	

	#archiveSlideout {
		position: fixed;
		top: 393px;
		left: 0px;
		z-index: 4;			
		width: 30px;
		height: 110px;
		padding: 3px 3px 0px 0px;
		text-align: center;
		background-color:rgba(112,138,144,0.8);
		-moz-transition-duration: 0.3s;
		-moz-border-radius: 0px 5px 5px 0px;
		border-radius: 0px 5px 5px 0px;
	}
	#archiveSlideoutInner {
		position: fixed;
		top: 40px;
		left: -235px;
		background-color:rgba(112,138,144,0.8);
		width: 215px;
		padding: 10px 10px 10px 10px;
		height: 90%;
		overflow:auto;
		-moz-transition-duration: 0.3s;
		text-align: left;
		-moz-border-radius: 0px 5px 5px 0px;
		border-radius: 0px 5px 5px 0px;
	}
	#archiveSlideout:hover {
		left: 235px;
		z-index: 6;
	}
	#archiveSlideout:hover #archiveSlideoutInner {
		left: 0px;
		z-index: 6;
	}	
	#tasksListArchived{
		height: 100%;
		overflow: auto;
		font-size: 14px;
	}	

	
	#commentSlideout {
		position: fixed;
		top: 470px;
		left: 0px;
		z-index: 3;
		width: 30px;
		height: 150px;
		padding: 30px 3px 0px 0px;
		text-align: center;
		background-color:rgba(112,138,144,0.8);
		-moz-transition-duration: 0.3s;
		-moz-border-radius: 0px 5px 5px 0px;
		border-radius: 0px 5px 5px 0px;
	}
	#commentSlideoutInner {
		position: fixed;
		top: 40px;
		left: -235px;
		background-color:rgba(112,138,144,0.8);
		width: 215px;
		padding: 10px;
		height: 600px;
		-moz-transition-duration: 0.3s;
		text-align: left;
		-moz-border-radius: 0px 5px 5px 0px;
		border-radius: 0px 5px 5px 0px;	
	}
	#commentSlideout:hover {
		left: 235px;
		z-index: 6;
	}
	#commentSlideout:hover #commentSlideoutInner {
		left: 0;
		z-index: 6;		
	}	

	div#printOuter {
        position: absolute;
        left: 70%;
        top: 10px;
        z-index: 7;
        visibility: hidden;
	}	
	div#printInner {
        height: 150px;
        position: absolute;
        width: 250px;
        top: 0px;
        visibility: hidden;
        display: table;
	}		
	div#printText {	
		opacity: 1;
		visibility: visible;
		display: table-cell;
		vertical-align : middle;
		text-align:center;		
		-moz-border-radius: 8px;
		border-radius: 8px;
        height: 150px;
        position: relative;
		background-color:rgba(112,138,144,0.9);
		padding: 10px;
		-moz-transition: opacity 0.5s ease-in-out;
	}
	div#printText.hidden{
		opacity: 0;
		visibility: hidden;
	}
		
	#slideArea {
		background: #ccc;
		height: 300px;
		width: 20px;
		background: url(images/sliderArea.png) no-repeat center center;
	}	 
	#slideKnob {
		height: 20px;
		width: 20px;
		background: #000;
		background: url(images/sliderKnob.png) no-repeat center center;
		cursor: move;		
	}		

	.input {
		border: 1px;
		border-style: solid;		
		background-color : #99FFBB;
		border: 1px solid #008000;
		width: 150px;
		color: #888;
		-moz-border-radius: 3px;
		border-radius: 3px; 
		margin-bottom: 5px;		
	}
	.verticalTab1{
		-moz-transform: rotate(-90deg);
		-moz-transform-origin: left top;
		width: 150px;
		height: 23px;
		margin: 0px 0px 0px 0px ;
		padding: 7px 0px 0px 0px ;
		line-height:98%;
		position: absolute;
		bottom:0px;
		letter-spacing:3px;
	}
	.verticalTab2{
		-moz-transform: rotate(-90deg);
		-moz-transform-origin: left top;
		width: 90px;
		height: 6px;
		margin: 0px 0px 0px 0px ;
		padding: 7px 0px 0px 0px ;
		line-height:98%;
		position: absolute;
		bottom:0px;
		letter-spacing:3px;
	}	
	.timestamp{
		line-height:98%;
		font-size:13px;
	}

	#aboutO {
		margin: 0px 20px 0px 20px;
	}
	#aboutI {
		width: 80%;
		height: 90%;
		position: relative; 
		font-size: 12px; 
		-moz-border-radius: 30px;
		border-radius: 30px; 
		background-color:rgba(112,138,144,0.9); 
		padding: 20px 20px 40px 20px;
		margin: 0px auto 0px auto;
	} 	
	#aboutI.hidden {
		visibility: hidden;
	} 
	/*	#aboutTab {
		position: absolute;
		top: 0;
		right: 20px;
		width: 0;
		height: 0;
		border-left: 25px solid transparent;
		border-right: 25px solid transparent;
		border-bottom: 25px solid black;
		-moz-transform: rotate(45deg);
		cursor: pointer;
	}*/	
/******* TIC ********/		

/******* LIGHTFACE ********/
					.lightface {
						margin: 0;
						padding: 0;
						border-collapse: collapse;
						position: absolute;
						top: -9000px;
						left: -9000px;
					}

					.lightface td {
						padding: 0;
						margin: 0;
						background-color: transparent;
						vertical-align: top;
						font-family: 'Verdana';
						font-size: 11px;
					}

					.lightface .centerLeft, .lightface .centerRight {
						width: 10px;
						height: auto;
						background-image: url(images/lightface/b.png);
						background-repeat: repeat-y;
					}

					.lightface .topLeft, .lightface .topRight, .lightface .bottomLeft, .lightface .bottomRight {
						width: 10px;
						height: 10px;
						background-repeat: no-repeat;
					}

					.lightface .topLeft {
						background-image: url(images/lightface/tl.png);
						background-position: top left;
					}

					.lightface .topRight {
						background-image: url(images/lightface/tr.png);
						background-position: top right;
					}

					.lightface .bottomLeft {
						background-image: url(images/lightface/bl.png);
						background-position: bottom left;
					}

					.lightface .bottomRight {
						background-image: url(images/lightface/br.png);
						background-position: bottom right;
					}

					.lightface .topCenter, .lightface .bottomCenter {
						width: auto;
						height: 10px;
						background-image: url(images/lightface/b.png);
						background-repeat: repeat-x;
					}

					.lightface .lightfaceContent {
						background-color: #fff;
						border: 1px solid #555;
						position: relative;
					}

					.lightface .loading {
						display: block;
						margin: 10px auto;
					}

					.lightface .lightfaceContent .lightfaceTitle {
						font-size: 14px;
						color: #fff;
						/*background-color: #6d84b4;*/
						background-color: rgba(112,138,144,1.0);
						border: 1px solid #3b5998;
						font-weight: bold;
						margin: -1px;
						margin-bottom: 0;
						padding: 5px 10px;
					}

					.lightface .lightfaceContent .lightfaceDraggable {
						cursor:move;
					}

					.lightface .lightfaceContent .lightfaceMessage {
						overflow: auto;
						margin: 0;
						position: relative;
						padding: 5px 10px;
						border: 1px solid #fff;
					}

					.lightface .lightfaceContent .lightfaceMessage h3,
					.lightface .lightfaceContent .lightfaceMessage h4,
					.lightface .lightfaceContent .lightfaceMessage h5,
					.lightface .lightfaceContent .lightfaceMessage h6 {
						margin-top: 6px;
					}

					.lightface .lightfaceContent .lightfaceFooter {
						/*background-color: #f2f2f2;*/
						background-color: rgba(112,138,144,0.8);
						border-top: 1px solid #ccc;
						padding: 6px 10px;
						text-align: right;
					}

					.lightface .lightfaceFooter label {
						font-size: 13px;
						border-style: solid;
						background-image:url(images/lightface/button.png);
						cursor:pointer;
						font-weight:bold;
						padding:2px 6px 2px 6px;
						text-align:center;
						vertical-align:top;
						white-space:nowrap;
						border-width:1px;
						margin-left:3px;
						background-position:0 0;
						border-color:#999;
						line-height:normal !important;
						display:inline-block;
					}

					.lightface .lightfaceFooter label input {
						background:none;
						border:0 !important;
						cursor:pointer;
						font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
						font-weight:bold;
						margin:0;
						padding:1px 0 2px;
						white-space:nowrap;
						text-align:center;
						color:#fff;
						font-size:13px;
						border: 2px outset buttonface;
						text-indent:0;
						text-shadow:none;
						display:inline-block;
						color:#444;
						font-size:13px;
					}
					/* ie6 hacks */
					* html .lightface .lightfaceFooter label input { border:0; }

					.lightface .lightfaceFooter label.lightfaceblue {
						border-color: #29447E #29447E #1A356E;
						background-position:0 -48px;
					}
					.lightface .lightfaceFooter label.lightfaceblue.lightfacefocusblue { 
						/*background-color: #5b74a8; */
						background-image:none; }

					.lightface .lightfaceFooter label.lightfacegreen {
						border-color: #3B6E22 #3B6E22 #2C5115;
						background-position:0 -96px;
					}
					.lightface .lightfaceFooter label.lightfacegreen.lightfacefocusgreen { background-color: #69A74E; 
						background-image:none; 
					}

					.lightface .lightfaceFooter label.lightfaceblue input,
					.lightface .lightfaceFooter label.lightfacegreen input {
						color:#fff;
					}


					.lightface .hiddenButton {
						visibility: hidden;
					}

					.lightface .lightfaceOverlay {
						position: absolute;
						left: 0;
						top: 0;
						bottom: 0;
						right: 0;
						/*
						background-image: url(fbloader.gif);
						background-position: center center;
						background-repeat: no-repeat;
						background-color: #fff;
						*/
						background:url(images/lightface/fbloader.gif) center center no-repeat #fff;
					}

					.lightface .lightfaceMessageBox	{ 
						overflow: auto;
						padding: 10px 10px;
						min-height: 20px;
						position:relative;
					}

					.lightface .lightFaceMessageBoxImage {
						overflow: hidden;
						padding: 0;
						background:url(images/lightface/fbloader.gif) center center no-repeat #fff;
					}

					.lightface .lightFaceMessageBoxImage img {
						display: block;
					}
/******* LIGHTFACE ********/

/******* DATEPICKER ********/
			.DynarchCalendar {
			  border: 1px solid rgba(112,138,144,1.0);
			  -moz-border-radius: 5px 5px 5px 5px;
			  border-radius: 5px 5px 5px 5px;	
			  -moz-user-select: none;
			  -webkit-user-select: none;
			  user-select: none;
			  background: #e8e8e8;
			  font: 11px "lucida grande",tahoma,verdana,sans-serif;
			  line-height: 14px;
			  position: relative;
			  cursor: default;
			}

			.DynarchCalendar table {
			  border-collapse: collapse;
			  font: 11px "lucida grande",tahoma,verdana,sans-serif;
			  line-height: 14px;
			}

			.DynarchCalendar-topBar {
			  border-bottom: 1px solid rgba(112,138,144,1.0);
			  background: #ddd;
			  padding: 5px 0 0 0;
			}

			table.DynarchCalendar-titleCont {
			  font-size: 130%; font-weight: bold;
			  color: #444;
			  text-align: center;
			  z-index: 9;
			  position: relative;
			  margin-top: -6px;
			}

			.DynarchCalendar-title div {
			  padding: 5px 17px;
			  text-shadow: 1px 1px 1px #777;
			}
			.DynarchCalendar-hover-title div {
			  background-color:rgba(112,138,144,0.3);		  
			  border: 1px solid rgba(112,138,144,0.3);
			  -moz-border-radius: 0px 0px 5px 5px;
			  border-radius: 0px 0px 5px 5px;				  
			  padding: 4px 16px;
			  background-repeat: no-repeat;
			  background-position: 100% 50%;
			}
			.DynarchCalendar-pressed-title div {
			  border: 1px solid rgba(112,138,144,1.0);
			  background-color:rgba(112,138,144,0.4);
			  -moz-border-radius: 0px 0px 5px 5px;
			  border-radius: 0px 0px 5px 5px;			  
			  padding: 4px 16px;
			  /*background-color: #777;*/
			  color: #fff;
			  background-repeat: no-repeat;
			  background-position: 100% 50%;
			}

			.DynarchCalendar-bottomBar {
			  border-top: 1px solid rgba(112,138,144,0.3);	  
			  background: #ddd;
			  padding: 2px;
			  position: relative;
			  text-align: center;
			}

			.DynarchCalendar-bottomBar-today {
			  padding: 2px 15px;
			}

			.DynarchCalendar-hover-bottomBar-today {
			  border: 1px solid rgba(112,138,144,1.0);
			  background-color: #fff;
			  padding: 1px 14px;
			}
			.DynarchCalendar-pressed-bottomBar-today {
			  border: 1px solid #000;
			  background-color: #777;
			  color: #fff;
			  padding: 1px 14px;
			}

			.DynarchCalendar-body {
			  position: relative;
			  overflow: hidden;
			  padding-top: 5px;
			  padding-bottom: 5px;
			}

			.DynarchCalendar-first-col { padding-left: 5px; }
			.DynarchCalendar-last-col { padding-right: 5px; }

			.DynarchCalendar-animBody-backYear {
			  position: absolute;
			  top: -100%;
			  left: 0;
			}
			.DynarchCalendar-animBody-back {
			  position: absolute;
			  top: 5px;
			  left: -100%;
			}
			.DynarchCalendar-animBody-fwd {
			  position: absolute;
			  top: 5px;
			  left: 100%;
			}
			.DynarchCalendar-animBody-now {
			  position: absolute;
			  top: 5px;
			  left: 0;
			}
			.DynarchCalendar-animBody-fwdYear {
			  position: absolute;
			  top: 100%;
			  left: 0;
			}

			.DynarchCalendar-dayNames {
			  padding-left: 5px;
			  padding-right: 5px;
			}

			.DynarchCalendar-dayNames div { font-weight: bold; color: #444; text-shadow: 1px 1px 1px #777; }

			.DynarchCalendar-navBtn {
			  position: absolute;
			  top: 5px;
			  z-index: 10;
			}

			.DynarchCalendar-navBtn div {
			  background-repeat: no-repeat;
			  background-position: 50% 50%;
			  height: 15px;
			  width: 16px;
			  padding: 1px;
			}
			.DynarchCalendar-hover-navBtn div {
			  border: 1px solid rgba(112,138,144,1.0);
			  padding: 0;
			  background-color: #fff;
			}
			.DynarchCalendar-navDisabled {
			  opacity: 0.3;
			  filter: alpha(opacity=30);
			}
			.DynarchCalendar-pressed-navBtn div {
			  border: 1px solid #000;
			  padding: 0;
			  background-color: #777;
			  color: #fff;
			}

			.DynarchCalendar-prevMonth {
			  left: 25px;
			}

			.DynarchCalendar-nextMonth {
			  left: 100%;
			  margin-left: -43px;
			}

			.DynarchCalendar-prevYear {
			  left: 5px;
			}

			.DynarchCalendar-nextYear {
			  left: 100%;
			  margin-left: -23px;
			}

			.DynarchCalendar-prevMonth div {
			  background-image: url("img/nav-left.gif");
			}

			.DynarchCalendar-nextMonth div {
			  background-image: url("img/nav-right.gif");
			}

			.DynarchCalendar-prevYear div {
			  background-image: url("img/nav-left-x2.gif");
			}

			.DynarchCalendar-nextYear div {
			  background-image: url("img/nav-right-x2.gif");
			}

			.DynarchCalendar-menu {
			  position: absolute;
			  left: 0;
			  top: 0;
			  width: 100%;
			  height: 100%;
			  background-color: #ddd;
			  overflow: hidden;
			  opacity: 0.85;
			  filter: alpha(opacity=85);
			}

			.DynarchCalendar-menu table td div {
			  text-align: center;
			  font-weight: bold;
			  padding: 3px 5px;
			}
			.DynarchCalendar-menu table td div.DynarchCalendar-menu-month {
			  width: 4em;
			  text-align: center;
			}
			.DynarchCalendar-menu table td div.DynarchCalendar-hover-navBtn {
			  border: 1px solid rgba(112,138,144,1.0);
			  padding: 2px 4px;
			  background-color: #fff;
			  color: #000;
			}
			.DynarchCalendar-menu table td div.DynarchCalendar-pressed-navBtn {
			  border: 1px solid rgba(112,138,144,1.0);			  
			  padding: 2px 4px;
			  background-color: #777;
			  color: #fff !important;
			}

			.DynarchCalendar-menu-year {
			  text-align: center;
			  font: 16px "lucida grande",tahoma,verdana,sans-serif;
			  font-weight: bold;
			}

			.DynarchCalendar-menu-sep {
			  height: 1px; font-size: 1px; line-height: 1px;
			  overflow: hidden;
			  border-top: 1px solid rgba(112,138,144,1.0);
			  background: #fff;
			  margin-top: 4px; margin-bottom: 3px;
			}

			.DynarchCalendar-time td { font-weight: bold; font-size: 120%; }
			.DynarchCalendar-time-hour, .DynarchCalendar-time-minute { padding: 1px 3px; }
			.DynarchCalendar-time-down { background: url("img/time-down.png") no-repeat 50% 50%; width: 11px; height: 8px; opacity: 0.5; }
			.DynarchCalendar-time-up { background: url("img/time-up.png") no-repeat 50% 50%; width: 11px; height: 8px; opacity: 0.5; }
			.DynarchCalendar-time-sep { padding: 0 2px; }
			.DynarchCalendar-hover-time { background-color: #444; color: #fff; opacity: 1; }
			.DynarchCalendar-pressed-time { background-color: #000; color: #fff; opacity: 1; }
			.DynarchCalendar-time-am { padding: 1px; width: 2.5em; text-align: center; }

			/* body */

			.DynarchCalendar-hover-week { background-color: #ddd; }

			.DynarchCalendar-dayNames div, .DynarchCalendar-day, .DynarchCalendar-weekNumber {
			  width: 1.7em;
			  padding: 3px 4px;
			  text-align: center;
			}
			.DynarchCalendar-weekNumber {
			  border-right: 1px solid rgba(112,138,144,1.0);
			  margin-right: 4px;
			  width: 2em !important;
			  padding-right: 8px !important;
			}

			.DynarchCalendar-day {
			  text-align: right; color: #222;
			}
			.DynarchCalendar-day-othermonth { color: #888; }
			.DynarchCalendar-weekend { color: #c22; }
			.DynarchCalendar-day-today { color: #00f; font-weight: bold; }

			.DynarchCalendar-day-disabled {
			  opacity: 0.5;
			  text-shadow: 2px 1px 1px #fff;
			}

			.DynarchCalendar-hover-date {
			  padding: 2px 3px;
			  background-color: #eef;
			  border: 1px solid #88c;
			  margin: 0 !important;
			  color: #000;
			}

			.DynarchCalendar-day-othermonth.DynarchCalendar-hover-date { border-color: #aaa; color: #888; }

			.DynarchCalendar-dayNames .DynarchCalendar-weekend { color: #c22; }
			.DynarchCalendar-day-othermonth.DynarchCalendar-weekend { color: #d88; }

			.DynarchCalendar-day-selected {
			  padding: 2px 3px;
			  margin: 1px;
			  background-color: #aaa;
			  color: #000 !important;
			}
			.DynarchCalendar-day-today.DynarchCalendar-day-selected { background-color: #999; }

			/* focus */

			.DynarchCalendar-focusLink {
			  position: absolute;
			  opacity: 0;
			  filter: alpha(opacity=0);
			}

			.DynarchCalendar-focused {
			  border-color: rgba(112,138,144,1.0);
			}

			.DynarchCalendar-focused .DynarchCalendar-topBar, .DynarchCalendar-focused .DynarchCalendar-bottomBar {
			  background-color: #ccc;
			  border-color: rgba(112,138,144,1.0);
			}

			.DynarchCalendar-focused .DynarchCalendar-hover-week {
			  background-color: #ccc;
			}

			.DynarchCalendar-tooltip {
			  position: absolute;
			  top: 100%;
			  width: 100%;
			}

			.DynarchCalendar-tooltipCont {
			  margin: 0 5px 0 5px;
			  border: 1px solid rgba(112,138,144,1.0);
			  border-top: 0;
			  padding: 3px 6px;
			  background: #ddd;
			}

			.DynarchCalendar-focused .DynarchCalendar-tooltipCont {
			  background: #ccc;
			  border-color: #000;
			}

			@media print {
			  .DynarchCalendar-day-selected {
			    padding: 2px 3px;
			    border: 1px solid rgba(112,138,144,1.0);
			    margin: 0 !important;
			  }
			}
/******* DATEPICKER ********/